<!--包含头部文件-->
{include file="public/header" /}
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 后台菜单 <span class="c-gray en">&gt;</span> 菜单列表 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container">
    <div class="cl pd-5 bg-1 bk-gray mt-10"> <span class="l"><a href="javascript:;" onclick="appmenu_add('新增菜单','{:url(\'menu/appmenu_add\')}',800,500)" class="btn btn-primary radius"><i class="Hui-iconfont">&#xe600;</i> 新增菜单</a></span> </div>
    <form class="form form-horizontal" name="ruleorder" method="post" action="" id="ajaxForm">
    <table class="table table-border table-bordered table-bg table-hover">
        <thead>
        <tr>
            <th scope="col" colspan="13">菜单列表</th>
        </tr>
        <tr>
            <!--<th width="25"><input type="checkbox" name="" value=""></th>-->
            <th>ID</th>
            <th width="20"></th>
            <th>菜单名称</th>
            <th>显示</th>
            <th>级别</th>
            <th>添加时间</th>
            <th>排序</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {foreach name="admin_rule" item="v"}
        <tr id="{$pid}-{$v.id}">
            <td>{$v.id}</td>
            <td>
                <a data-id="{$v.id}" data-level="{$v.level}" href="{:url('menu/appmenu_list')}" style="cursor:pointer;" class="rule-list">
                    {if condition="$v['son'] gt 0"} <i class="Hui-iconfont fa-plus">&#xe600;</i> {/if}
                </a>
            </td>
            <td class="hidden-xs" style='padding-left:{if condition="$v.leftpin neq 0"}{$v.leftpin}px{/if}'>{$v.lefthtml}{$v.name}</td>
            <td>
                {if condition="$v['status'] eq 1"}显示
                {else/}隐藏
                {/if}
            </td>
            <td>{$v.level}级</td>
            <td>{$v.add_time|date='Y-m-d H:i:s',###}</td>
            <td><input name="{$v.id}" value="{$v.sort}" style="width: 50px;"/></td>
            <td class="td-manage">
                <a title="编辑" href="javascript:;" onclick="appmenu_edit('编辑','{:url(\'menu/appmenu_edit\',[\'id\'=>$v.id])}','800','500')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6df;</i></a>
        </tr>
        {/foreach}
        <tr>
            <td colspan="9" align="left">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;排序&nbsp;&nbsp;">
            </td>
        </tr>
        </tbody>
    </table>
    </form>
    <div class="row">
        <div class="col-sm-2" id="pageBox">

        </div>
    </div>
</div>
<!--包含footer文件-->
{include file="public/footer" /}

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="__STATIC__/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="__STATIC__/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="__STATIC__/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="__STATIC__/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="__STATIC__/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="__STATIC__/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript">
    /*
     参数解释：
     title 标题
     url      请求的url
     id       需要操作的数据id
     w    弹出层宽度（缺省调默认值）
     h    弹出层高度（缺省调默认值）
     */
    /*菜单-增加*/
    function appmenu_add(title,url,w,h){
        layer_show(title,url,w,h);
    }
    /*菜单-删除*/
    function appmenu_del(obj,id){
        layer.confirm('确认要删除吗？',function(index){
            $.ajax({
                type: 'POST',
                url: '{:url("menu/appmenu_del")}',
                data:{"id":id},
                dataType: 'json',
                success: function(data){
                    $(obj).parents("tr").remove();
                    layer.msg('已删除!',{icon:1,time:1000});
                },
                error:function(data) {
                    console.log(data.msg);
                },
            });

        });
    }

    /*菜单-编辑*/
    function appmenu_edit(title,url,w,h){
        layer_show(title,url,w,h);
    }

    $(function () {
        // 排序
        $("#ajaxForm").validate({
            onkeyup:false,
            focusCleanup:true,
            success:"valid",
            submitHandler:function(form){
                var arr = new FormData(document.getElementById("ajaxForm"));
                $.ajax({
                    url:"{:url('menu/appmenu_order')}",
                    type:"post",
                    data:arr,
                    async: true,
                    processData: false,
                    contentType: false,
                    dataType:"json",
                    success:function (data) {
                        if (data.code == 200){
                            layer.alert('排序成功',{
                                skin: 'layui-layer-molv' //样式类名 自定义样式
                                ,closeBtn: 0  // 是否显示关闭按钮
                                ,anim: 1 //动画类型
                                ,btn: '确认'//按钮
                                ,icon: 6  // icon
                                ,yes:function(){
                                    location.reload();
                                }
                            })
                        }else {
                            layer.alert('排序失败'+data.msg+'',{
                                skin: 'layui-layer-molv' //样式类名 自定义样式
                                ,closeBtn: 0  // 是否显示关闭按钮
                                ,anim: 1 //动画类型
                                ,btn: '确认'//按钮
                                ,icon: 6  // icon
                            })
                        }

                    },
                    error:function () {
                        layer.alert('排序失败',{
                            skin: 'layui-layer-molv' //样式类名 自定义样式
                            ,closeBtn: 0  // 是否显示关闭按钮
                            ,anim: 1 //动画类型
                            ,btn: '确认'//按钮
                            ,icon: 6  // icon
                        })
                    }
                })

            }
        });

        /*权限管理*/
        $('body').on('click','.rule-list',function () {
            var $a=$(this),$tr=$a.parents('tr');
            var $pid=$tr.attr('id');
            if($a.find('i').hasClass('fa-minus')){
                $("tr[id^='"+$pid+"-']").attr('style','display:none');
                // $a.find('i').removeClass('fa-minus').addClass('fa-plus');
                // $a.find('i')[0].innerText = "&#xe600;";
                $a.html('<i class="Hui-iconfont fa-plus">&#xe600;</i>')
            }else{
                console.log('fa-minus')
                if($("tr[id^='"+$pid+"-']").length>0){
                    $("tr[id^='"+$pid+"-']").attr('style','');
                    // $a.find('i').removeClass('fa-plus').addClass('fa-minus');
                    // $a.find('i')[0].innerText = "&#xe6a1;";
                    $a.html('<i class="Hui-iconfont fa-minus">&#xe6a1;</i>')
                }else{
                    // $a.find('i')[0].innerText = "&#xe6a1;";
                    $a.html('<i class="Hui-iconfont fa-minus">&#xe6a1;</i>')
                    var $url = this.href,$id=$a.data('id'),$level=$a.data('level');
                    $.post($url,{pid:$id,level:$level,id:$pid}, function (data) {
                        if (data) {
                            $a.find('i').removeClass('fa-plus').addClass('fa-minus');
                            $tr.after(data);
                        }else{
                            $a.find('i').removeClass('fa-plus').addClass('fa-minus');
                        }
                    }, "json");
                }
            }
            return false;
        });
    })


</script>
</body>
</html>
